<template>
<div class="menuDetail">
    <div class="img-box">
        <img :src="clickMenu[0].image">
    </div>
    <div class="title">【{{ clickMenu[0].title }}】</div>
    <div class="introduce">简介：{{ clickMenu[0].introduce }}</div>
    <div class="material">
        <b>材料：</b>
        <ul>
            <li v-for="item in material">{{ item }}</li>
        </ul>
    </div>

    <div class="make"><b>详细步骤:</b><br>{{ clickMenu[0].make }}</div>

</div>
</template>


<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
let store = useStore()

let clickMenu = computed(()=>store.getters['menuModule/getMenuDetail'])
let material = clickMenu.value[0].material.split(',')


</script>


<style lang="less" scoped>
@import '../../style/common.less';
.menuDetail{
    display: block;
    position: relative;
    background: @g3;
    min-height: 621px;
    >.img-box{
        width: 100%;
        height: 40%;
        >img{
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }
    }
    >.title{
        font-weight: 600;
        font-size: 1.4rem;
        line-height: 60px;
        color: @c9;
        background: @g1;
        border-radius: 8px;
        margin-bottom: 10px;
    }
    >.introduce{
        background: @g1;
        padding: 10px;
        color: @c9;
        border-radius: 8px;
        font-size: 1rem;
        margin-bottom: 10px;
    }
    >.material{
        background: @g1;
        border-radius: 8px;
        color: @c10;
        padding: 10px 20px;
        margin-bottom: 10px;
        >ul{
            >li{
                text-align: center;
                line-height: 36px;
                color: @c8;
                border-bottom: 1px solid @g4;
            }
        }
    }
    >.make{
        background: @g1;
        border-radius: 10px;
        padding: 10px;
        line-height: 36px;
        color: @g8;
        font-size: .8rem;
        >b{
            font-size: 1rem;
        }
    }
}
</style>